<template>
  <div>
    <el-upload class="upload-demo" action=""
               :file-list="arrlist"
               :show-file-list="true"
               :limit="1" ref="firstUpload"
               :auto-upload="false"
               :on-change="uploadVideo">
      <div tabindex="0" class="el-upload-video" v-if="imageUrl">
        <img :src="imageUrl" alt="" />
      </div>
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
  let COS = require('cos-js-sdk-v5');
  export default {
    name: "qqcos",
    data() {
      return {
        // apiHost: 'http://127.0.0.1:9080',
        apiHost: 'http://115.182.9.167',
        imageUrl: '',
        uid:'75624809',
        bucket: 'xcreator-1305103504',
        // bucket: 'gongweiedu-1257784922',
        filePath: 'coshsn',
        arrlist:[]
      };
    },
    mounted() {
      this.getRequest(this.apiHost+'/vapi/comm/cosToken2.do',{
        tokenName: 'test',
        uid: this.uid, //
      },{}).then(res => {
        console.log(res)
        /* eslint-disable */
        this.COS = new COS({
          getAuthorization: (options, callback) => {
            var credentials = res && res.data.credentials
            if (!res || !credentials) return console.error('credentials invalid')
            callback({
              TmpSecretId: credentials.tmpSecretId,
              TmpSecretKey: credentials.tmpSecretKey,
              XCosSecurityToken: credentials.sessionToken,
              // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
              StartTime: res.data.startTime, // 时间戳，单位秒，如：1580000000
              ExpiredTime: res.data.expiredTime, // 时间戳，单位秒，如：1580000900
              // ScopeLimit: true, // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
            })
          },
        })
      })
    },
    methods: {
      uploadVideo(fileInfo){
        console.log(fileInfo);
        const suffix = fileInfo.name.substring(fileInfo.name.lastIndexOf('.') + 1).toLowerCase();
        let fileUrl = this.filePath + `/${new Date().getTime()}.${suffix}`;
        this.COS.putObject(
                {
                  Bucket: this.bucket /* 必须 */,
                  Region: 'ap-beijing' /* 存储桶所在地域，必须字段 */,
                  Key: fileUrl, //'coshsn/'+fileInfo.name,              /* 必须 */
                  StorageClass: 'STANDARD',
                  Body: fileInfo.raw, // 上传文件对象
                  onProgress: (progressData) => {
                    console.log(Math.round(progressData.percent * 100))
                  },
                },
                (err, data) => {
                  console.log(err)
                  console.log(data)
                  if (!err) {
                    this.COS.getObjectUrl(
                            {
                              // 获取文件访问地址
                              Method: 'PUT',
                              Key: fileUrl, //'coshsn/'+fileInfo.name,
                              Bucket: this.bucket,
                              Region: 'ap-beijing',
                              Sign: false,
                            },
                            (err, data) => {
                              console.log(err)
                              console.log(data)
                              let res = err || data
                              console.log(res)
                              let imgUrl = res.Url;
                              if(imgUrl && imgUrl.indexOf("gongweiedu-1257784922.cos.ap-beijing.myqcloud.com") > 0){
                                imgUrl = imgUrl.replace('gongweiedu-1257784922.cos.ap-beijing.myqcloud.com','om.app.cctv.com')
                              }
                              this.imageUrl = imgUrl

                            }
                    )
                  } else {
                    console.log('上传失败,请重新上传！' )
                  }
                }
        )
      }
    }
  }
</script>

<style scoped>

</style>